{{ template "layout/header" .}}
<main id="body">
    <div class="container">
        <div class="btn-group mb-3 d-lg-none" role="group" id="my_mobile_nav">
            <a role="button" class="btn btn-secondary active" data-active="menu-my" href="/my.html">个人资料</a>
            <a role="button" class="btn btn-secondary" data-active="menu-my-thread" href="/my.html?action=5">论坛帖子</a>
            <a role="button" class="btn btn-secondary" data-active="menu-my-notice" href="?my-notice.htm">消息</a>
        </div>
        <div class="row">
            <!-- 左侧菜单 -->
            <div class="col-lg-2 hidden-md hidden-sm" id="my_aside">
                <div class="card">
                    <div class="card-body text-center">
                        <img class="avatar-4" src="{{.sessions.Useravatar}}">
                        <br>zhang
                    </div>
                    <div class="list-group list-group-flush text-center">
                        <a href="/my.html" class="list-group-item list-group-item-action active"
                            data-active="menu-my">个人资料</a>
                        <a href="/my_thread.html" class="list-group-item list-group-item-action"
                            data-active="menu-my-thread">论坛帖子</a>
                        <a href="?my-notice.htm" class="list-group-item list-group-item-action"
                            data-active="menu-my-notice">消息</a>
                    </div>
                </div>
            </div>
            <!-- 右侧内容 -->
            <div class="col-lg-10" id="my_main">
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs">
                            <li class="nav-item">
                                <a class="nav-link" href="/my.html" data-active="my_profile">基本资料</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/my_password.html" data-active="my_password">密码</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="/my_avatar.html" data-active="my_avatar">头像</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/my_rename.html" data-active="my_rename">更改用户名</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/my.html?action=4" data-active="my-email_notice">邮件通知</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="col-lg-6 mx-auto">
                            <div class="form-group text-center">
                                <img id="avatar_img" class="logo-4" src="{{.sessions.Useravatar}}">
                            </div>
                            <form id="form" action="/api/v1/user/{{.sessions.Userid}}/avatar/reset"
                                enctype="multipart/form-data">
                                <div class="form-group custom-file">
                                    <input type="file" name="avatar" id="avatar_upload"
                                        accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                                        class="upload custom-file-input" value="头像">
                                    <label class="custom-file-label" for="customFile">选择文件</label>
                                </div>
                            </form>
                            <div class="progress mt-2">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                    aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
                                    style="width: 0%; display: none;" id="avatar_progress"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    var jform = $("#form");
    var uploader = $("#avatar_upload");

    uploader.on('change', function () {
        var fd = new FormData()
        image = $('#avatar_upload')[0].files[0]
        fd.append("avatar", image)

        $.ajax({
            url: jform.attr("action"),
            data: fd,
            type: "POST",
            contentType: false,
            processData: false,
            success: function (res) {
                //成功
                console.log(res)
                // return
                if (res.code == 200) {
                    $.alert("修改成功")
                    setTimeout(function () {
                        location.reload()
                    }, 5000)
                } else {
                    $.alert(res.message)
                    return
                }
            }
        })
    });



</script>
{{ template "layout/footer" .}}
